<template>
	<view class="shopcart">
		<!-- 购物车 -->
		<view class="cartBottom">
			<view class="carIcon">
				<view class="iconBox" :class="getAllCount ? 'active' : '' " @click="toggleList">	
					<text class="allcount" v-if="getAllCount">{{getAllCount}}</text>
					<image src="/static/cart.png" mode="" class="img"></image>
				</view>
			</view>
			<view class="middle">
				<text class="price" :class="getAllCount ?　'active': ''">￥{{getAllPrice}}</text>
				<text class="deliveryPrice" style="font-size: 12px; color: #999;">已优惠：{{getAllPrice1}}元</text>
			</view>
			<view class="tij-btn">
				<text @click="tijiaock()">提交</text>
			</view>
		</view>
		<!-- 选择的商品 -->
		<view class="cartList" v-show="isShowList && getList.length">
			<scroll-view scroll-y style="max-height: 400px;">
				<view class="title" style="padding: 20upx;">
					<text>购物车</text>
					<view class="clear" @click="delShopcart">
						清空
					</view>
				</view>
				<view class="list">
					<view class="list-text" v-for="(item,index) in getList" :key="index">
						<image :src="item.detail.cover" mode=""></image>
						<view class="list-text-box">
							<text style="">{{item.detail.title}}</text>
							<text style="">￥{{item.detail.discount_price}}</text>
						</view>
						<cartcontrol :food="item" @add="addCart" @dec="decreaseCart"></cartcontrol>
					</view>
				</view>
			</scroll-view>
		</view>
		<view class="listMask" v-show="isShowList && getList.length" @click="toggleList"></view>
		<uni-popup ref="popup" class="pop-box">
			<view class="toucan-bt">
				<text class="toucan-bt-h4">购物车</text>
				<text class="toucan-bt-span">清空菜单</text>
				<button @click="close" class="gb-btn">×</button>
			</view>
			<view class="toucan-box">
				<view class="tc-main-box">
					<view class="tc-main-bt">
						<text class="tc-main-h4">第01道菜</text>
						<view class="anbtn-box">
							<button class="bj-btn">编辑</button>
							<button class="sanc-btn">删除</button>
						</view>
					</view>
					<view class="tc-main-list">
						<view class="tc-main-list-h4">主菜</view>
						<view class="tc-main-list-box">
							<view class="tc-main-list-box-tx"><image src="../static/ima.png" mode=""></image></view>
							<view class="tc-main-list-box-text">
								<view class="caipin-text">猪肉里脊，450g</view>
								<view class="caipin-jg">￥5.8</view>
							</view>
							<button class="qx-btn">×</button>
						</view>
						<view class="tc-main-list-box">
							<view class="tc-main-list-box-tx"><image src="../static/ima.png" mode=""></image></view>
							<view class="tc-main-list-box-text">
								<view class="caipin-text">猪肉里脊，450g</view>
								<view class="caipin-jg">￥5.8</view>
							</view>
							<button class="qx-btn">×</button>
						</view>
					</view>
					<view class="tc-main-list">
						<view class="tc-main-list-h4">主菜</view>
						<view class="tc-main-list-box">
							<view class="tc-main-list-box-tx"><image src="../static/ima.png" mode=""></image></view>
							<view class="tc-main-list-box-text">
								<view class="caipin-text">猪肉里脊，450g</view>
								<view class="caipin-jg">￥5.8</view>
							</view>
							<button class="qx-btn">×</button>
						</view>
						<view class="tc-main-list-box">
							<view class="tc-main-list-box-tx"><image src="../static/ima.png" mode=""></image></view>
							<view class="tc-main-list-box-text">
								<view class="caipin-text">猪肉里脊，450g</view>
								<view class="caipin-jg">￥5.8</view>
							</view>
							<button class="qx-btn">×</button>
						</view>
					</view>
				</view>
				<view class="tc-main-box">
					<view class="tc-main-bt">
						<text class="tc-main-h4">第01道菜</text>
						<view class="anbtn-box">
							<button class="bj-btn">编辑</button>
							<button class="sanc-btn">删除</button>
						</view>
					</view>
					<view class="tc-main-list">
						<view class="tc-main-list-h4">主菜</view>
						<view class="tc-main-list-box">
							<view class="tc-main-list-box-tx"><image src="../static/ima.png" mode=""></image></view>
							<view class="tc-main-list-box-text">
								<view class="caipin-text">猪肉里脊，450g</view>
								<view class="caipin-jg">￥5.8</view>
							</view>
							<button class="qx-btn">×</button>
						</view>
						<view class="tc-main-list-box">
							<view class="tc-main-list-box-tx"><image src="../static/ima.png" mode=""></image></view>
							<view class="tc-main-list-box-text">
								<view class="caipin-text">猪肉里脊，450g</view>
								<view class="caipin-jg">￥5.8</view>
							</view>
							<button class="qx-btn">×</button>
						</view>
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import cartcontrol from '@/components/cartcontrol.vue'
	export default {
		props: {
			goods: {
				type: Array
			}
		},
		data() {
			return {
				isShowList: false,
			};
		},
		components: {
			cartcontrol
		},
		computed: {
			getList() {
				let result = [];
				this.goods.forEach((good) => {
					if (good.num) {
						result.push(good)
					}
				})	
				return result
			},
			// 获得购物车所有商品数量
			getAllCount() {
				let result = 0;
				this.getList.forEach((food) => {
					result += food.num
				})
				return result
			},
			// 总价
			getAllPrice() {
				let result = 0;
				let result1 = 0;
				this.goods.forEach((good) => {
					result1 += this.accMul(good.num, good.detail.discount_price)
					result = result1.toFixed(2);
				})
				return result
			},
			getAllPrice1() {
				let result = 0;
				let result1 = 0;
				this.goods.forEach((good) => {
					result1 += this.accMul(good.num, good.detail.market_price)
					result = (result1.toFixed(2)-this.getAllPrice).toFixed(2)
				})
				return result
			}
		},
		methods: {
			//提交
			tijiaock(){
				this.$emit('tijiao');
				// uni.navigateTo({
				// 	url:'/pages/my/cfdistribution'
				// })	
			},
			// 解决浮点数 运算出现多位小数
			accMul(arg1, arg2) {
				let m = 0,
					s1 = '',
					s2 = '';
				if (arg1 && arg1 != null)
					s1 = arg1.toString();
				if (arg2 && arg2 != null)
					s2 = arg2.toString();
				try {
					m += s1.split('.')[1].length
				} catch (e) {}
				try {
					m += s2.split('.')[1].length
				} catch (e) {}

				return Number(s1.replace('.', '')) * Number(s2.replace('.', '')) / Math.pow(10, m);
			},
			open() {
						this.$refs.popup.open('top')
					},
			close() {
				this.$refs.popup.close()
			},
			toggleList() {
				if (this.getList.length) {
					this.isShowList = !this.isShowList;
				}
			},
			delShopcart() {
				this.isShowList = false;
				this.$emit('delAll');
			},
			addCart: function(item) {
				this.$emit('add', item)
			},
			decreaseCart(item) {
				this.$emit('dec', item)
			}

		},
	}
</script>

<style scoped>
	.list-text {
		display: flex;
		flex-direction: row;
	}

	.shopcart .cartBottom {
		position: fixed;
		bottom: -1px;
		left: 0;
		right: 0;
		height: 60px;
		z-index: 99;
		display: flex;
		background-color: #141d27;
	}

	.carIcon {
		flex: 1;
	}

	.iconBox {
		position: absolute;
		bottom: 0;
		left: 18px;
		top: 0;
		z-index: 101;
		background-color:#e27900;
		border-radius: 50%;
		height: 40px;
		width: 40px;
		margin: auto;
	}

	.iconBox .allcount {
		position: absolute;
		right: -6px;
		top: 0;
		display: inline-block;
		padding: 0 6px;
		font-size: 9px;
		line-height: 16px;
		font-weight: 400;
		border-radius: 10px;
		background-color: #f01414;
		color: #ffffff;
	}

	.img {
		font-size: 24px;
		line-height: 24px;
		overflow: inherit;
		width: 20px;
		height: 20px;
		display:block;
		color: #cccccc;
		border-radius: 50%;
		position:absolute;
		left:0;
		right:0;
		top:0;
		bottom: 0;
		margin: auto;
	}

	.carIcon .active {
		background-color: #e27900;
	}
	.list-text image { display: block; width: 100upx; height: 100upx; border-radius: 10upx; }
	.list-text-box { overflow: hidden; width: calc(100% - 100upx - 20upx - 120upx); padding-left: 20upx; }
	.list-text-box text{ overflow: hidden; display: block; margin: 0 auto; width: 100%; text-align: left; }
	.list-text-box text:nth-of-type(1){ font-size: 32upx; color: #666; margin: 10upx auto; }
	.list-text-box text:nth-of-type(2){ font-size: 32upx; }
	.middle {
		display: flex;
		flex-direction: column;
		flex: 2;
		color: #ffffff;
	}

	.BtnRight {
		flex: 1;
	}

	.cartList {
		position: fixed;
		bottom: 54px;
		left: 0;
		right: 0;
		z-index: 90;
	}

	.cartList .title,
	.cartList .list-text {
		display: flex;
		flex-direction: row;
	}

	.cartList .title {
		background: #F3F5F7;
		justify-content: space-between;
		padding: 4px 8px;
	}

	.cartList .list-text {
		padding: 10px 6px 10px 8px;
		text-align: center;
	}

	.list {
		background: #F8F8F8;
		padding-bottom: 10px;
	}


	/* 遮布 */
	.listMask {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 89;
		opacity: 0.5;
		background: #6a7076;
	}
</style>
